// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import "./js/citydata.js" as City

Item {
    id: item1
    width: 400
    height: 600

    function setProvince()
    {
        province_model.clear();
        province_model.append(
                                    {"province": "热门城市"}
                              );
        province_model.append(
                                    {"province": "直辖市"}
                              );
        for (var i=0; i < City.ls.province.length; i++)
        {
            province_model.append({
                        "province": City.ls.province[i].name
                        });
        }
//        City.ls
    }

    function setCities(index)
    {
        city_model.clear();
        var cities = City.ls.province[index].citys;
        for (var i=0; i < cities.length; i++)
        {
            city_model.append({
                                  "name": cities[i].name,
                                  "mapx": cities[i].x,
                                  "mapy": cities[i].y,
                                  "level": cities[i].level,
                                  "bus": cities[i].bus,
                                  "sat": cities[i].sat,
                                  "e": cities[i].e
                              }
                              );
        }
    }

    function setHotCity()
    {
        city_model.clear();
        var cities = City.ls.hotcity;
        for (var i=0; i < cities.length; i++)
        {
            city_model.append({
                                  "name": cities[i].name,
                                  "mapx": cities[i].x,
                                  "mapy": cities[i].y,
                                  "level": cities[i].level,
                                  "bus": cities[i].bus,
                                  "sat": cities[i].sat,
                                  "e": cities[i].e
                              }
                              );
        }
    }

    function setBigCity()
    {
        city_model.clear();
        var cities = City.ls.city;
        for (var i=0; i < cities.length; i++)
        {
            city_model.append({
                                  "name": cities[i].name,
                                  "mapx": cities[i].x,
                                  "mapy": cities[i].y,
                                  "level": cities[i].level,
                                  "bus": cities[i].bus,
                                  "sat": cities[i].sat,
                                  "e": cities[i].e
                              }
                              );
        }
    }

    Component.onCompleted:
    {
        setProvince();
    }

    Text {
        id: title
        color: "#ffffff"
        text: "选择城市"
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        font.pixelSize: 55
    }

    Item {
        id: item_list_container
        clip: true
        anchors.right: parent.right
        anchors.rightMargin: 60
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: title.bottom
        anchors.topMargin: 10

        ListView {
            id: list_view_province
            x: 0
            y: 0
            width: parent.width
            height: parent.height - 60
//            spacing: 10

            delegate: Item {
                x: 5
                height: 60
                width: parent.width
                Column {
                    id: row1
                    spacing: 10
                    Text {
                        text: province
//                        anchors.verticalCenter: parent.verticalCenter
                        font.bold: true
                        font.pixelSize: 33
                        color: "#ffffff"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: "white"
                    }
                }

                MouseArea
                {
                    anchors.fill: parent

                    onClicked:
                    {
                        if (index == 0)
                        {
                            item1.state = "city";
                            setHotCity();
                        }
                        else if (index == 1)
                        {
                            item1.state = "city";
                            setBigCity();
                        }
                        else
                        {
                            item1.state = "city";
                            setCities(index - 2);
                        }
                    }
                }
            }
            model: province_model

            Behavior on x
            {
                NumberAnimation{easing.type: Easing.OutElastic; duration: 400}
            }
        }

        ListView {
            id: list_view_city
            y: 0
            width: parent.width
            height: parent.height - 60
            anchors.left: list_view_province.right
            anchors.leftMargin: 0
//            spacing: 10

            delegate: Item {
                x: 5
                height: 60
                width: parent.width
                Column {
                    id: row2
                    spacing: 10
                    Text {
                        text: name
//                        anchors.verticalCenter: parent.verticalCenter
                        font.bold: true
                        font.pixelSize: 33
                        color: "#ffffff"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: "white"
                    }
                }

                MouseArea
                {
                    anchors.fill: parent

                    onClicked:
                    {
                        item1.state = "";
//                        setCities(index);
                        console.log(mapx + "," + mapy + "," + level)
//                        web_view_map.evaluateJavaScript("map.setCenter(new sogou.maps.Point("
//                                                        + mapx + "," + mapy + "), zoom:" + level + ")");
                        web_view_map.setxy(mapx,mapy,level);
                        js.zoom_level = level;
                        data_container.setting_gps_follow_me = false;
                    }
                }
            }
            model: city_model

            Behavior on x
            {
                NumberAnimation{easing.type: Easing.OutElastic; duration: 400}
            }
        }
    }

    ListModel
    {
        id: province_model
    }

    ListModel
    {
        id: city_model
    }

    states: [
        State {
            name: "city"

            PropertyChanges {
                target: list_view_province
                x: -width
            }
        }
    ]
}
